<!-- Created by henian.xu on 2018/8/24. -->

<template>
    <Page :title="pageTitle">
        <Container>
            <GridGroup
                class="ma-b"
                :columns="3"
            >
                <Grid
                    icon="&#xf003;"
                    icon-class="tc-main"
                    label="Badge"
                    sub-label="徽章"
                    to="/component/badge"
                />
                <Grid
                    icon="&#xf003;"
                    icon-class="tc-main"
                    label="Form"
                    sub-label="表单"
                    to="/component/form"
                />
                <Grid
                    icon="&#xf003;"
                    icon-class="tc-main"
                    label="Cell"
                    sub-label="单元格"
                    to="/component/cell"
                />
                <Grid
                    icon="&#xf003;"
                    icon-class="tc-main"
                    label="Button"
                    sub-label="按钮"
                    to="/component/button"
                />
                <Grid
                    icon="&#xf003;"
                    icon-class="tc-success"
                    label="Divider"
                    sub-label="分割线"
                    to="/component/divider"
                />
                <Grid
                    icon="&#xf003;"
                    icon-class="tc-primary"
                    label="Grid"
                    sub-label="九宫格"
                    to="/component/grid"
                />
            </GridGroup>
            <Divider label="分割线"/>
            <div class="pa-a">
                <GridGroup
                    :columns="4"
                    border
                >
                    <Grid
                        v-for="index in 9"
                        :key="index"
                        :label="`Grid ${index}`"
                        :span="((index-1)%4)?0:2"
                    />
                </GridGroup>
            </div>
            <Divider label="我是有底线的"/>
        </Container>
    </Page>
</template>

<script>
import pageMixin from '@/mixins/page';

export default {
    name: 'Index',
    mixins: [pageMixin],
    data() {
        return {};
    },
    methods: {
        onBtnClick(e) {
            console.log('onBtnClick', e);
        },
    },
};
</script>

<style lang="scss">
</style>
